<template>
  <div>
    <div>
      <van-search
        v-model="searchConsumer"
        placeholder="搜索顾客"
        input-align="center"
        shape="round"
        background="transparent" />
    </div>
    <div style="font-size: 16px; color: #237eff; font-weight: 600; margin: 6px 0 0 16px">待回访</div>
    <div
      style="
        width: 42px;
        height: 6px;
        background-image: linear-gradient(to right, #237eff, #d4e4fa);
        margin: -6px 0 16px 16px;
      " />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad">
      <div
        v-for="(item, index) in list"
        :key="index"
        style="
          display: flex;
          justify-content: space-between;
          height: 49px;
          background-color: #fff;
          border-radius: 8px;
          margin: 0 16px 12px 16px;
          align-items: center;
        ">
        <div style="display: flex; align-items: center">
          <div style="margin-left: 2px; width: 28px; height: 28px">
            <img :src="imgUrl(item.grade)" width="28" height="28" />
          </div>
          <div style="width: 42px; font-size: 14px">{{ item.cname }}</div>
          <div style="width: 12px; height: 12px; margin: 1px">
            <img v-if="item.sex === 0" src="@/assets/images/consumer-b.png" width="12" height="12" />
            <img v-else src="@/assets/images/consumer-g.png" width="12" height="12" />
          </div>
          <div style="width: 28px; font-size: 12px; color: #666666; text-align: center; padding-top: 4px">
            {{ getAge(item.solar) }}岁
          </div>
          <div style="margin-left: 4px">
            <van-tag v-if="item.trust2 === 0" type="warning" style="padding: 2px 2px 4px 2px">未设置</van-tag>
            <van-tag v-if="item.trust2 === 1" type="danger" style="padding: 2px 2px 4px 2px">未破冰</van-tag>
            <van-tag v-if="item.trust2 === 2" type="primary" style="padding: 2px 2px 4px 2px">已破冰</van-tag>
            <van-tag v-if="item.trust2 === 3" type="success" style="padding: 2px 2px 4px 2px">已信任</van-tag>
          </div>
        </div>
        <div style="display: flex">
          <div style="margin-right: 8px">
            <van-button
              type="info"
              style="height: 28px; width: 58px"
              size="small"
              round
              @click="setContent(item, index)">
              去回访
            </van-button>
          </div>
        </div>
      </div>
    </van-list>
    <van-popup v-model="show" round position="bottom" :style="{ height: '50%' }">
      <van-cell-group style="margin: 24px">
        <van-field v-model="callback.content" rows="7" autosize type="textarea" placeholder="输入你的内容" />
      </van-cell-group>
      <div style="margin: 0 0 24px 24px; font-size: 16px; color: #666666">顾客心情</div>
      <div style="width: 100%; display: flex; justify-content: center; margin-bottom: 24px">
        <van-radio-group v-model="mood" direction="horizontal">
          <van-radio :name="0" style="margin-right: 40px">不开心</van-radio>
          <van-radio :name="1" style="margin-right: 40px">平常</van-radio>
          <van-radio :name="2">开心</van-radio>
        </van-radio-group>
      </div>
      <div style="margin: 0 24px">
        <van-button round block type="info" @click="onSubmit">提交</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getCallbackByKid, updateCallback } from '@/api/ym';
import dayjs from 'dayjs';
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
import CellGroup from 'vant/lib/cell-group';
import 'vant/lib/cell-group/style';
import Col from 'vant/lib/col';
import 'vant/lib/col/style';
import Field from 'vant/lib/field';
import 'vant/lib/field/style';
import List from 'vant/lib/list';
import 'vant/lib/list/style';
import Notify from 'vant/lib/notify';
import 'vant/lib/notify/style';
import Popup from 'vant/lib/popup';
import 'vant/lib/popup/style';
import Radio from 'vant/lib/radio';
import RadioGroup from 'vant/lib/radio-group';
import 'vant/lib/radio-group/style';
import 'vant/lib/radio/style';
import Row from 'vant/lib/row';
import 'vant/lib/row/style';
import Search from 'vant/lib/search';
import 'vant/lib/search/style';
import Tag from 'vant/lib/tag';
import 'vant/lib/tag/style';
import { mapGetters } from 'vuex';

export default {
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Search.name]: Search,
    [Notify.name]: Notify,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Tag.name]: Tag,
    [Popup.name]: Popup,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Field.name]: Field,
  },
  filters: {
    fltDeadline(val) {
      return dayjs(val).format('YYYY-MM-DD');
    },
  },
  data() {
    return {
      mood: 0,
      searchConsumer: '',
      currentIndex: 0,
      callback: {
        id: undefined,
        content: '',
      },
      show: false,
      list: [],
      loading: false,
      finished: false,
    };
  },
  computed: {
    ...mapGetters(['name', 'id']),
  },
  // created () {
  //   this.callback.recorder = this.name
  // },
  methods: {
    getAge(bd) {
      if (bd) {
        const birthday = dayjs(bd.replace('年', '-').replace('月', '-').replace('日', ''));
        const now = dayjs();
        return now.diff(birthday, 'year');
      }
      return 0;
    },
    imgUrl(grade) {
      const g = grade ? grade : 0;
      return require('@/assets/images/keeper-c-' + g + '.png');
    },
    onLoad() {
      this.loading = false;
      getCallbackByKid(this.id).then(res => {
        this.list = res.data.data;
        // console.log(this.list);
        this.finished = true;
      });
    },
    setContent(item, index) {
      this.currentIndex = index;
      // this.callback = Object.assign({}, item)
      this.callback.id = item.sid;
      this.callback.kid = item.kid;
      this.callback.cid = item.id;
      this.callback.recorder = this.name;
      this.callback.content = '';
      this.mood = undefined;
      this.show = true;
    },
    onSubmit() {
      if (this.callback.content === '') {
        Notify({ type: 'warning', message: '请先填写回访内容' });
        return;
      }
      updateCallback(this.callback).then(_ => {
        // this.list[this.currentIndex].status = 1
        // this.list[this.currentIndex].content = this.callback.content
        this.list.splice(this.currentIndex, 1);
        this.show = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.m-cost {
  background-color: #fff;
  font-size: 26px;
  margin-bottom: 3px;
  padding: 0 10px;
  line-height: 60px;
}
.m-current {
  background-color: #fff;
  line-height: 30px;
  font-size: 20px;
  color: rgb(184, 184, 184);
  text-align: center;
}
</style>
